<template>
	<view :class="themeName">
		<view class="address-edit">
			<view class="p-l-30 p-r-30 bg-white">

				<!-- 联系方式 -->
				<view class="form-item bb flex">
					<view class="label">{{$zhTran('收货人')}}</view>
					<input class="m-l-10" v-model="addressObj.contact" name="contact" type="text"
						:placeholder="$zhTran('请填写收货人姓名')" />
				</view>
				<view class="form-item bb flex">
					<view class="label">{{$zhTran('联系方式')}}</view>
					<input class="m-l-10" name="mobile" v-model="addressObj.mobile" type="number"
						:placeholder="$zhTran('请填写手机号码')"></input>
				</view>

				<!-- 地区选择 -->
				<view @click="showRegion = true">
					<view class="form-item bb flex">
						<view class="label">{{$zhTran('所在地区')}}</view>
						<view class="flex flex-1 row-between m-l-10" style="width: 100%;">
							<input name="region" v-model="region" disabled type="text"
								:placeholder="$zhTran('请选择省、市、区')"></input>
							<u-icon color="#707070" name="arrow-right"></u-icon>
						</view>
					</view>
				</view>

				<!-- 详细地址填写 -->
				<view class="form-item flex col-top bb m-t-10" style="height: 170rpx;">
					<view class="label m-t-20">{{$zhTran('详细地址')}}</view>
					<textarea name="address" class="nr flex-1 m-l-10 p-t-25" style="height: 130rpx;"
						v-model="addressObj.address" :placeholder="$zhTran('请填写小区、街道、门牌号等信息')" auto-blur />
				</view>

				<view>
					<view class="m-t-10 m-b-10 bg-white flex row-between form-item">
						<view class="label" style="width: 250rpx;">
							{{$zhTran('设置为默认地址')}}
						</view>
						<u-switch size="35" v-model="addressObj.is_default" :active-color="themeColor"
							inactive-color="#eee"></u-switch>
					</view>
				</view>

			</view>

			<button class="my-btn white flex br60 row-center" @click="onSubmit">{{$zhTran('完成')}}</button>

			<!-- 地址选择 -->
			<!-- <u-select v-model="showRegion" :confirm-color="themeColor" cancel-color="#999" mode="mutil-column-auto"
				@confirm="regionChange" :list="lists" :defaultValue="defaultValue"></u-select> -->
			<u-picker v-model="showRegion" :confirm-color="themeColor" cancel-color="#999" mode="region"
				:area-code="areaCode" @confirm="regionChange">
			</u-picker>
		</view>
		<w-jishuzhichi class="jishuzhichi-nodata" />
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | LikeShop100%开源免费商用电商系统
	// +----------------------------------------------------------------------
	// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
	// | 开源版本可自由商用，可去除界面版权logo
	// | 商业版本务必购买商业授权，以免引起法律纠纷
	// | 禁止对系统程序代码以任何目的，任何形式的再发布
	// | Gitee下载：https://gitee.com/likeshop_gitee/likeshop
	// | 访问官网：https://www.likemarket.net
	// | 访问社区：https://home.likemarket.net
	// | 访问手册：http://doc.likemarket.net
	// | 微信公众号：好象科技
	// | 好象科技开发团队 版权所有 拥有最终解释权
	// +----------------------------------------------------------------------
	// | Author: LikeShopTeam
	// +----------------------------------------------------------------------
	import {
		apiAddressEdit,
		apiAddressDetail,
		hasRegionCode,
		apiAddresshandleRegion,
		apiAddressAdd
	} from '@/api/user';
	export default {
		data() {
			return {
				addressObj: {
					contact: '', //联系方式
					mobile: '', //手机号码
					province: '', //省
					city: '', //市
					district: '', //区
					address: '', //详细地址
					is_default: 0 //是否默认
				},
				region: '', //省市区显示
				addressId: '', //编辑的商品ID
				defaultRegion: [this.$zhTran('广东省'), this.$zhTran('广州市'), this.$zhTran('番禺区')],
				areaCode: [],
				defaultRegionCode: '440113', //地区代码
				showRegion: false, //显示地区选择的flag
				lists: [], //省市区的数据
				defaultValue: [0]
			};
		},

		onLoad: function(options) {
			this.addressId = parseInt(options?.id)
			if (options?.id) {
				// this.lists = area; //省市区数据
				// this.addressId = options == undefined ? '' : parseInt(options.id)
				// if (this.addressId) {
				uni.setNavigationBarTitle({
					title: this.$zhTran('编辑地址')
				});
				this.apiAddressDetailFun();
			} else {
				uni.setNavigationBarTitle({
					title: this.$zhTran('添加地址')
				});
				this.getWxAddressFun();
			}
		},
		onUnload: function() {
			uni.removeStorageSync('wxAddress');
		},
		methods: {
			// 是否默认地址
			changeChecked(e) {
				if (e) {
					this.addressObj.is_default = 1
				} else {
					this.addressObj.is_default = 0
				}
			},

			// 提交地址信息
			onSubmit() {
				let addressId = this.addressId;
				let addressObj = {
					province_id: this.addressObj.province_id,
					city_id: this.addressObj.city_id,
					district_id: this.addressObj.district_id,
					type: this.addressObj.type,
					is_default: this.addressObj.is_default,
					address: this.addressObj.addressId
				}
				this.addressObj.is_default = this.addressObj.is_default ? 1 : 0
				if (!this.addressObj.contact) return this.$toast({
					title: this.$zhTran('请填写收货人姓名')
				});
				if (!this.addressObj.contact.length >= 20) return this.$toast({
					title: this.$zhTran('输入的收货人长度不得大于20位')
				})
				if (!this.addressObj.mobile) return this.$toast({
					title: this.$zhTran('请填写手机号码')
				});
				if (!this.region) return this.$toast({
					title: this.$zhTran('请选择地区')
				});
				if (!this.addressObj.address) return this.$toast({
					title: this.$zhTran('请填写小区、街道、门牌号等信息')
				});

				if (addressId) {
					apiAddressEdit({
						...this.addressObj
					}).then(res => {
						this.$toast({
							title: this.$zhTran('编辑成功')
						}, {
							tab: 3,
							url: 1
						});
					}).catch(err => {
						return this.$toast({
							title: this.$zhTran(err)
						});
					});
				} else {
					apiAddressAdd({
						...this.addressObj
					}).then(res => {
						this.$toast({
							title: this.$zhTran('添加成功')
						}, {
							tab: 3,
							url: 1
						});
					}).catch(err => {
						return this.$toast({
							title: this.$zhTran(err)
						});
					});
				}
			},

			// 地区选择，选择当前省市区的ID
			regionChange(region) {
				console.log(region)
				const {
					city,
					province,
					area
				} = this.$zhTran(region)
				this.addressObj.province_id = province.value;
				this.addressObj.city_id = city.value;
				this.addressObj.district_id = area.value;
				this.region = province.label + " " + city.label + " " + area.label
				// this.addressObj.province_id = region[0].value;
				// this.addressObj.city_id = region[1].value;
				// this.addressObj.district_id = region[2].value;
				// this.region = region[0].label + " " + region[1].label + " " + region[2].label
			},

			// 编辑的时候获取
			apiAddressDetailFun() {
				apiAddressDetail({
					id: this.addressId
				}).then(nres => {
					let res = this.$zhTran(nres)
					res.type -= 1
					this.addressObj = res;
					this.region = `${res.province} ${res.city} ${res.district}`
					this.areaCode = [res.province_id, res.city_id, res.district_id]
				});
			},

			getWxAddressFun() {
				let wxAddress = uni.getStorageSync('wxAddress');
				if (!wxAddress) return;
				wxAddress = JSON.parse(wxAddress)
				console.log(wxAddress)
				let {
					userName: contact,
					telNumber: mobile,
					provinceName: province,
					cityName: city,
					detailInfo: address
				} = wxAddress;
				let district = wxAddress.countryName || wxAddress.countyName
				apiAddresshandleRegion({
					province,
					city,
					district
				}).then(nres => {
					let res = this.$zhTran(nres)
					if (res.province && res.city && res.district) {
						this.region = this.$zhTran(`${province} ${city} ${district}`);
						this.areaCode = [res.province, res.city, res.district]
						this.addressObj.province_id = res.province;
						this.addressObj.city_id = res.city;
						this.addressObj.district_id = res.district;
					}
					this.addressObj.contact = contact;
					this.addressObj.mobile = mobile
					this.addressObj.address = address
					this.addressObj = this.$zhTran(this.addressObj)
				});
			},
			// getLocation() {
			// 	var that = this;

			// 	qqmapsdk = new QQMapWX({
			// 		key: location_key
			// 	});

			// 	uni.getLocation({
			// 		type: 'wgs84',
			// 		success: function (res) {
			// 			var latitude = res.latitude
			// 			var longitude = res.longitude
			// 			location = JSON.stringify({
			// 				latitude,
			// 				longitude
			// 			})
			// 			that.getLocal(latitude, longitude)
			// 		},
			// 		fail: function (res) {
			// 			console.log('fail' + JSON.stringify(res))
			// 		}
			// 	})
			// },
			// // 获取当前地理位置
			// getLocal: function (latitude, longitude) {
			// 	var that = this;
			// 	qqmapsdk.reverseGeocoder({
			// 		location: {
			// 			latitude: latitude,
			// 			longitude: longitude
			// 		},
			// 		success: function (res) {
			// 			if (res.message == 'query ok') {
			// 				var province = res.result.ad_info.province
			// 				var city = res.result.ad_info.city
			// 				var district = res.result.ad_info.district
			// 				apiAddresshandleRegion({
			// 					province,
			// 					city,
			// 					district
			// 				}).then(resr => {
			// 					if (resr.province && resr.city && resr.district) {
			// 						that.region = `${province} ${city} ${district}`;
			// 						that.addressObj.province_id = resr.province;
			// 						that.addressObj.city_id = resr.city;
			// 						that.addressObj.district_id = resr.district;
			// 					}
			// 				});
			// 				var province_idx = that.findIndex(that.lists, (item) => item.label ===
			// 					province)
			// 				var city_idx = that.findIndex(that.lists[province_idx].children, (item) => item
			// 					.label ===
			// 					city)
			// 				var district_idx = that.findIndex(that.lists[province_idx].children[city_idx]
			// 					.children, (item) => item.label ===
			// 						district)
			// 				that.defaultValue = [province_idx, city_idx, district_idx]
			// 			}
			// 		},
			// 		fail: function (res) {
			// 			console.log(res);
			// 		}
			// 	})
			// },
			// findIndex(arr, fn) {
			// 	const res = this.findData(arr, fn)
			// 	const indexs = res.indexs.reverse()

			// 	return res.config && fn(res.config) ? indexs : null
			// },
			// findData(arr, fn, indexs = []) {
			// 	return arr.reduce((obj, item, index) => {
			// 		if (obj.config && fn(obj.config)) {
			// 			return obj
			// 		}
			// 		const isArray = Array.isArray(item)
			// 		const res = isArray ? findData(item, obj.indexs) : fn(item) ? {
			// 			config: item
			// 		} : null
			// 		if (res && res.config && fn(res.config)) {
			// 			obj.indexs.push(index)
			// 			return {
			// 				config: res.config,
			// 				indexs: obj.indexs
			// 			}
			// 		}
			// 		return obj
			// 	}, {
			// 		config: null,
			// 		indexs
			// 	})
			// }
		}
	};
</script>
<style lang="scss">
	.address-edit {
		padding-top: 10rpx;

		.bb {
			border-bottom: 1px solid #e5e5e5;
		}

		.form-item {
			height: 110rpx;

			.label {
				width: 150rpx;
				font-weight: 500;
				font-size: 30rpx;
			}

			input {
				height: 100%;
				flex: 1;
			}
		}

		.my-btn {
			@include background_color();
			height: 80rpx;
			margin: 30rpx 26rpx;
			margin-top: 80rpx;
			text-align: center;
		}
	}
</style>